{js include="gui::info"}

<h1>Регистрация</h1>

<style>{literal}
div#auth, div#auth input { color:#000; }
div#auth { margin-left:20%; width:60%; }
div#auth input { font-size: 2.1em; margin:0.2em 0; text-align:center; width:100%; }
div#auth a { color:#000; font-size: 1.1em; text-decoration:none; border-bottom:1px solid; }
div#auth a:hover { color:#14ABC1; }
div#auth.register { margin:0;width:100%; }
div#auth.register input { font-size:1.2em;text-align:left;width:90% }
div#auth.register label { font-size:1.2em;display:inline-block; }
div#auth.register table td { vertical-align:top; }
div#auth.register td.info { font-weight:bold; color:#922; }
div#auth.register td.info i { font-style:normal; color:#9a1; }
div#auth.register td.info b { color:#4b4; }
div#auth div#myLoginSelector { position:absolute; width:120px; background:#ffd; border:1px solid #ddb; padding:1px 4px; }
{/literal}</style>

<form action="{$auth__controller}signup/" method="post" id="signup">
<input type="hidden" name="code" value="{$code|default:''}" />
<div id="auth" class="register">
<table>
<thead><th width="25%">&nbsp;</th><th width="40%">&nbsp;</th><th>&nbsp;</th></thead>
<tbody>
<tr><td><label for="myName">Ваше имя</label></td><td><input id="myName" type="text" value="{$name}" name="i[name]" /></td><td rowspan="2" valign="top" id="myNameInfo" class="info">&nbsp;</td></tr>
<tr><td><label for="mySurname">И фамилия</label></td><td><input id="mySurname" type="text" value="{$surname}" name="i[surname]" /></td></tr>
<tr class="state1"><td colspan="3">&nbsp;</td></tr>
<tr class="state1"><td><label for="myEmail">E-Mail</label></td><td><input id="myEmail" type="text" value="{$email}" name="i[email]" /></td><td id="myEmailInfo" class="info">&nbsp;</td></tr>
<tr class="state1"><td>&nbsp;</td><td colspan="2">При отсутствии электронной почты Вам следует её завести.</td></tr>
<tr class="state2"><td colspan="3">&nbsp;</td></tr>
<tr class="state2"><td><label for="myLogin">Логин</label></td><td><input id="myLogin" type="text" value="{$login}" name="i[login]" style="width:131px;"/><label for="myLogin">@{'host'|config}</label><div id="myLoginSelector" style="display:none;">&nbsp;</div></td><td id="myLoginInfo" class="info"></td></tr>
<tr class="state2"><td>&nbsp;</td><td colspan="2">Людей много, а красивых названий &mdash; мало.<br/>Но мы поможем Вам найти хороший логин!</td></tr>
<tr class="state3"><td colspan="3">&nbsp;</td></tr>
<tr class="state3"><td><label for="myPassword">Пароль</td><td><input id="myPassword" type="password" value="" name="i[password]" /></td><td id="myPasswordInfo" class="info"></td></tr>
<tr class="state3"><td><label for="myPassword2">Еще раз пароль</td><td><input id="myPassword2" type="password" value="" name="i[password2]" /></td><td id="myPassword2Info" class="info"></td></tr>
<tr class="state3"><td>&nbsp;</td><td colspan="2">Пароль должен состоять не менее чем из 6-ти символов и не может совпадать с логином.</td></tr>
<tr class="state3"><td colspan="3">&nbsp;</td></tr>
{*<tr><td>&nbsp;</td><td>captcha server offline</td><td>&nbsp;</td></tr>
<tr><td colspan="3">&nbsp;</td></tr>*}
<tr><td>&nbsp;</td><td><input id="myButton" type="submit" style="text-align:center" value="Зарегистрироваться" /></td></tr>
<tr><td colspan="3"><br/>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td colspan="2"><a href="/my/recovery/"><b>&#x00bf;</b> Если Вы забыли пароль &mdash; поможем!</a></td></tr>
<tr><td colspan="3">&nbsp;</td></tr>
<tr><td>&nbsp;</td><td colspan="2"><b><a href="/my/signin/">@ А у меня уже есть аккаунт! ;-)</a></b></td></tr>
</tbody></table>
</div>
</form>

<script>{literal}
var auth = {
	init: function( ) {
		this.i = {};
		this.v = {};
		this.v.name = $('myName');
		this.v.surname = $('mySurname');
		this.i.namei = $('myNameInfo');
		this.v.login = $('myLogin');
		this.i.logini = $('myLoginInfo');
		this.i.logins = $('myLoginSelector');
		this.v.email = $('myEmail');
		this.i.emaili = $('myEmailInfo');
		this.v.password = $('myPassword');
		this.i.passwordi = $('myPasswordInfo');
		this.v.password2 = $('myPassword2');
		this.i.password2i = $('myPassword2Info');
		this.form = $('signup');
		
		this.v.name.focus();
		
		this.v.email.value = this.v.email.value || '@';
		this.v.email.addEvents({'change':auth.onEmailChange});
		this.v.password.addEvents({'keyup':auth.onPassChange,'change':auth.onPassChange});
		this.v.password2.addEvents({'keyup':auth.onPassChange,'change':auth.onPassChange});
		this.v.name.addEvents({'change':auth.onNameChange});
		this.v.surname.addEvents({'change':auth.onNameChange});
		this.v.login.addEvents({'change':auth.onLoginChange});
		this.form.addEvent('submit',function(e){
			e.stop();
			auth.signup();
		});
		
		this.unfreezeForm();
	},
	
	onNameChange: function(e) {
		auth.i.namei.innerHTML = auth.checkName( );
	},
	checkName: function( b ) {
		var n = auth.getName(), s = auth.getSurname( );
		if( n == '' || s == '' ) return b?false:'Для регистрации требуется заполнить и имя, и фамилию.';
		if( (n.length + s.length) < 6 )
			return b?false:'к сожалению, мы не верим, что Вас зовут '+n+' '+s;
		return b?true:'<b>очень приятно, '+n+' :-)</b>';
	},
	getName: function( )
	{
		var n=this.v.name.value.replace(/[^a-zа-я ]/ig,'').trim();
		if( n.length < 2 ) return '';
		return n[0].toUpperCase()+n.substr(1).toLowerCase();
	},
	getSurname: function( )
	{
		var s=this.v.surname.value.replace(/[^a-zа-я ]/ig,'').trim();
		if( s.length < 2 ) return '';
		return s[0].toUpperCase()+s.substr(1).toLowerCase();
	},
	
	onLoginChange: function(e) {
		auth.loginok = false;
		//auth.logini, auth.logins
		var t =
		function(responseJSON, responseText){
			if( !responseJSON.result.logins ) return;
			auth.i.logins.hide();
			if( responseJSON.result.logins.contains(auth.v.login.value) )
			{
				auth.i.logini.innerHTML = '<b>логин свободен</b>';
				auth.loginok = true;
				return;
			}
			auth.loginok = false;
			
			var s = ''; //auth.logins.innerHTML = '';
			$each( responseJSON.result.logins, function(el,i){
				s += '<a class="jsbutton" onclick="auth.v.login.value=\''+el+'\';auth.onLoginChange();">'+el+'</a><br/>';
			});
			auth.i.logins.innerHTML = s;
			auth.i.logins.show();
			
			auth.i.logini.innerHTML = 'к сожалению, логин занят другим пользователем';
		};
		if( auth.v.login.value.length >= 3 && !auth.v.login.value.test(/[а-я]/i) )
		(new Request.JSON({
			'url': '/ajax/auth/checklogin/',
			'async': false,
			'onSuccess': t
		})).post({'login': auth.v.login.value, 'name': auth.getName(), 'surname': auth.getSurname(), 'email': auth.v.email.value });
		
		auth.i.logini.innerHTML = auth.checkLogin( );
	},
	checkLogin: function( b ) {
		var p = auth.v.login.value;
		if( p.length < 3 ) return b?false:'слишком короткий логин';
		if( p.test(/[а-я]/i) ) return b?false:'логин содержит русские буквы';
		if( auth.loginok === null ) auth.v.login.fireEvent('change');
		if( auth.loginok === false ) return b?false:'по-видимому, логин занят другим пользователем';
		return b?true:'<b>логин свободен</b>';
	},
	
	onPassChange: function(e) {
		if( auth.v.password.value == '' ) return;
		auth.i.passwordi.innerHTML = auth.checkPass( );
		auth.i.password2i.innerHTML = auth.checkPass2( );
	},
	checkPass: function( b ) {
		var pass = auth.v.password.value;
		if( pass.length < 6 ) return b?false:'слишком короткий';
		if( pass == auth.v.login.value ) return b?false:'такой же, как и логин';
		if( pass.test(/[а-я]/i) ) return b?false:'пароль содержит русские буквы';
		var easy = pass.test(/123|qwe|asd|zxc|abc|qaz|йцу|фыв|ячс|йфя|абв/);
		var spec = pass.test(/!|@|#|\$|_|\)|\(|\\| /);
		var digits = pass.test(/[0-9]/);
		var alpha = pass.test(/[a-z]/);
		if( !spec && ( easy || (!alpha && digits)) ) return b?false:'слишком простой';
		if( !spec && alpha && !digits ) return b?true:'<i>хороший пароль</i>';
		if( spec && !alpha && digits ) return b?true:'<i>хороший пароль</i>';
		return b?true:'<b>надежный пароль</b>';
	},
	checkPass2: function( b ) {
		if( !auth.checkPass( 1 ) || auth.v.password2.value == '' ) { return b?false:''; }
		else {
			if( auth.v.password2.value!=auth.v.password.value ) return b?false:'пароли не совпадают';
			else return b?true:'<b>спасибо</b>';
		}
	},
	
	onEmailChange: function(e) {
		//if( !auth.checkMail( 1 ) )
		auth.emailok = false;
		var t =
		function(responseJSON, responseText){
			if( !responseJSON.result ) return;
			auth.emailok = responseJSON.result.free;
		};
		if( auth.v.email.value.length >= 9 && auth.v.email.value.test( /^[a-z0-9\-\_\.]+@([a-z0-9][a-z0-9\-]+\.)+([a-z]{2}|info|com|net|org|biz)$/ ) )
		(new Request.JSON({
			'url': '/ajax/auth/checkemail/',
			'async': false,
			'onSuccess': t
		})).post({'email': auth.v.email.value });
		
		auth.i.emaili.innerHTML = auth.checkMail( );
	},
	checkMail: function( b ) {
		var p = auth.v.email.value;
		if( p.length < 9 ) return b?false:'слишком короткий email';
		if( !p.test( /^[a-z0-9\-\_\.]+@([a-z0-9][a-z0-9\-]+\.)+([a-z]{2}|info|com|net|org|biz)$/ ) ) return b?false:'неверный email';
		if( auth.emailok === null ) auth.v.email.fireEvent('change');
		if( auth.emailok === false ) return b?false:'к сожалению, email уже используется';
		return b?true:'<b>email доступен для регистрации</b>';
	},
	
	checkAll: function( ) {
		var r = 0; auth.loginok = auth.emailok = null;
		r += !auth.checkName( 1 );	auth.i.namei.innerHTML = auth.checkName( );
		r += !auth.checkMail( 1 ); 	auth.i.emaili.innerHTML = auth.checkMail( );
		r += !auth.checkLogin( 1 );	auth.i.logini.innerHTML = auth.checkLogin( );
		r += !auth.checkPass( 1 );	auth.i.passwordi.innerHTML = auth.checkPass( );
		r += !auth.checkPass2( 1 );	auth.i.password2i.innerHTML = auth.checkPass2( );
		return !r;
	},
	
	freezeForm: function( ) { $each(auth.form.elements, function(el){el.disabled=true;el.setStyle('color','#777');} ); },
	unfreezeForm: function( ) { $each(auth.form.elements, function(el){el.disabled=false;el.setStyle('color','');} ); var s=auth.form.getElements('[type=submit]')[0]; s.disabled=true;s.setStyle('color','#777'); (function(){s.disabled=false;s.setStyle('color','');}).delay(3000); },
	
	signup: function( ) {
		auth.freezeForm();
		if( !auth.checkAll( ) )
		{
			alert( 'Для регистрации необходимо заполнить нужные поля.' );
			auth.unfreezeForm();
			return;
		}
		
		var data={}; for(var i in auth.v) data[i]=auth.v[i].value;
		data.code = auth.form.code.value;
		
		var t = function(responseJSON, responseText) {
			if( !responseJSON.result ) return;
			var r=responseJSON.result;
			if( r.location ) (function(){ window.location = r.location; }).delay(3000);
			if( r.hash ) auth.form.code.value = r.hash;
			alert( r.code == 200
				? 'Регистрация прошла успешно. На почтовый ящик Вам выслано подтверждение.'
				: ( r.code == 403
					? 'Вы уже авторизованы. Через несколько секунд Вы перейдете на Вашу личную страницу.'
					: 'Во время выполнения регистрации произошла ошибка.<br/><br/>Возможно прошло слишком много времени после загрузки страницы, или что-то пошло не так, как ожидалось.<br/><br/>Попробуйте еще раз повторить регистрацию сейчас или немного позже.' )
				);
		};
		
		(new Request.JSON({'url':'/ajax/auth/signup/','async':false,'onSuccess':t})).post({'data':data});
		
		auth.unfreezeForm();
	}
};
window.addEvent( 'domready', function(){
	auth.init();
});
</script>{/literal}